<template>
	<div>
		<!-- 个人信息 -->
		<div class="box1">
			<ul class="list1">
				<li>
					<div>
						<img src="../../../public/img/img-3d9ddd55f5c297e5434174e69158b067.jpg" class="list1-img">
					</div>
				</li>
				<li>
					<p>{{username}}(免费)<span class="list1-span">></span></p>
					<p>门店ID:80026878<span class="list1-span">免费与付费的区别</span></p>
					<p>18483628931..老板<span class="list1-span">退出</span></p>
					<p>有效期:永久免费版<span class="list1-span">购买</span></p>
				</li>
			</ul>
		</div>
		<!-- 子模块 -->
		<div class="box2">
			<ul class="list2">
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-xinxi"></use>
					</svg>
					<p>跟进记录</p>
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-wenjian"></use>
					</svg>
					<p>模块管理</p>
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-tupian"></use>
					</svg>
					<p>客户报价</p>
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shoucang"></use>
					</svg>
					<p>员工管理</p>
				</li>
			</ul>
		</div>
		<!-- 功能列表 -->
		<div class="box3">
			<ul class="list3">
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shizhong"></use>
					</svg>登陆专业版
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-lianxiren"></use>
					</svg>购买产品及服务
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-dizhi"></use>
					</svg>销总管订货
				</li>
			</ul>
			<ul class="list3">
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shangdian"></use>
					</svg>账户与安全
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-Wifi"></use>
					</svg>短信设置
				</li>
			</ul>
			<ul class="list3">
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-dianhua"></use>
					</svg>公告
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-pie_flat"></use>
					</svg>微信绑定
					<span style="background-color:red;color:white;font-size:10px;">HOT</span>
				</li>
			</ul>
			<ul class="list3" style="margin-bottom:100px;">
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-internet_flat"></use>
					</svg>我要做小程序
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-idea_flat"></use>
					</svg>关于我们
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: "personalcenter",
		computed:{
			username(){
				var obj=JSON.parse(window.localStorage.getItem("logined")).username
				return obj
			}
		}
	}
</script>

<style scoped="scoped">
	.box1 {
		background-color: lightblue;
		margin: 0;
		padding-top: 3%;
		padding-bottom: 7%;
	}

	.box1 h4 {
		color: white;
	}
	
	.box2 {
		z-index: 10;
		background-color:rgba(0,0,0,0.1);
		width: 90%;
		margin: 0 auto;
		left: 0;
		right: 0;
		margin-top: -10px;
	}
	
	.box3 {
		width: 90%;
		margin: 0 auto;
		left: 0;
		right: 0;
	}



	.list1 {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.list1 li:nth-child(1) {
		width: 20%;
	}

	.list1 li:nth-child(2) {
		width: 70%;
	}

	.list1 li p {
		font-size: 12px;
		line-height: 18px;
		color: white;
	}

	.list1-img {
		border-radius: 50%;
	}

	.list1-span {
		margin-left: 10px;
		color: rgba(0, 0, 0, 0.3);
	}

	

	.list2 {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		justify-content: center;
	}

	.list2 li {
		width: 50%;
		text-align: center;
		line-height: 20px;
		margin: 10px;
	}
	
	.list3{
		margin-bottom:10px;
		border:1px solid lightblue;
		border-bottom:none;
	}
	.list3 li{
		border-bottom:1px solid lightblue;
		padding:10px;
	}

	img {
		margin: 0;
		padding: 0;
		width: 100%;
		display: block;
		border: none;
	}

	.icon {
		width: 1.5em;
		height: 1.5em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}

	p,h4,ul,li {
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
	}
</style>
